<template>
  <div id="poster">
    <el-form :model="loginForm" ref="loginForm" :rules="loginFormRules" class="login-container" label-position="left"
      label-width="0px">
      <h2 class="login_title">在线聊天系统 —— 登录</h2>
      <el-form-item prop="zhanghu">
        <el-input clearable prefix-icon="iconfont icon-denglu" type="text" v-model="loginForm.zhanghu" auto-complete="off"
          placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input clearable prefix-icon="iconfont icon-denglu-mima" type="password" v-model="loginForm.password"
          auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label-width="22%">
        <el-button type="info" v-on:click="login" style="width: 36%;">登录</el-button>
        <el-button type="infor" style="width: 36%;" v-on:click="forgete">忘记密码</el-button>
      </el-form-item>
      <el-form-item id="textItem">
        <p>没有账户 <a v-on:click="register">点击注册</a></p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    checkResData,
    setToken,
    setUserId,
    setUserNickName,
    setUserImg
  } from '../utils/selfInfoUtil.js'
  export default {
    name: 'Login',
    data() {
      return {
        loginForm: {
          zhanghu: '',
          password: ''
        },
        // 表单验证
        loginFormRules: {
          zhanghu: [{
            required: true,
            message: '登录账号不能为空！',
            trigger: 'change'
          }],
          password: [{
            required: true,
            message: '登录密码不能为空！',
            trigger: 'change'
          }]
        }
      }
    },
    methods: {
      // 忘记密码
      forgete() {
        console.log("忘记密码")
      },
      register() {
        this.$router.push('/register')
      },
      login() {
        // 验证表单0
        this.$refs.loginForm.validate(async valid => {
          if (valid) {
            this.$axios.post('/user/login', {
                username: this.loginForm.zhanghu,
                password: this.loginForm.password
              }, {
                emulateJSON: true
              })
              .then(res => {
                if (checkResData(res.data.code, res.data.success)) {
                  setToken(res.data.data.token)
                  setUserId(res.data.data.id)
                  setUserNickName(res.data.data.nickname)
                  setUserImg(res.data.data.img)
                  this.$message.success(res.data.msg)
                  this.$router.push('/home')
                } else {
                  this.$message.error(res.data.msg)
                }
              })
              .catch(err => {
                this.$message.error("服务器溜了！ 已经去抓了")
              })
          }
        })
      }

    }
  }
</script>

<style>
  #poster {
    background: url(../assets/images/bj.png);
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;

  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 10% auto;
    width: 70%;
    padding: 35px 35px 15px 35px;
    background: #d8e3e7;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  #textItem {
    text-align: right;
  }

  #textItem a {
    cursor: pointer;
    font-size: 1.125rem;
  }
</style>
